<template>
    <div class="tabcontrol">
        <div v-for="(item,index) in titles" :key="index" class="tabcontrol-item">
            <span  @click="itemClick(index)" :class="{active:index === clickIndex}">
                {{item}}
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name:'tabcontrol',
    props:{
        titles:Array
    },
    data(){
        return {
            clickIndex:0
        }
    },
    methods:{
        itemClick(index){
            this.clickIndex = index
            this.$emit('tabClick',index)
        }
    }
}
</script>

<style scoped>

.tabcontrol {
    display: flex;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #fff;
    z-index: 9;
 }
 .tabcontrol-item {
    flex: 1;
 }
 .tabcontrol-item span {
    padding:0 4px 4px 4px;
}
 .tabcontrol-item .active {
    color: var(--color-high-text);
    border-bottom: 3px solid var(--color-high-text);
 }
</style>